<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="../css/index.css"> -->
    <style>
        #table tr td {
            width: 115px;
            text-align: center
        }
        #table tr:nth-of-type(even){
            background-color: rgb(214, 151, 34) !important ;
        }
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .wrap {
            width: 800px;
            min-height: 500px;
            background-color: rgb(99, 213, 245);
            background-repeat: no-repeat;
            background-size: cover;
            margin: 0 auto;
            position: relative;
            overflow: hidden;
        }

        .wrap #form {
            width: 600px;
            height: 120px;
            background: #fff;
            border-radius: 12px;
            position: absolute;
            left: 50%;
            top: 116px;
            transform: translateX(-50%);
            display: flex;
            flex-wrap: wrap;
            padding: 26px;
            box-sizing: border-box;
        }

        .wrap #form p {
            margin-bottom: 10px;
        }

        .wrap #form p input {
            width: 120px;
            height: 28px;
            border-radius: 12px;
            border: solid 1px #19c2ff;
            margin: 0 10px;
            padding: 5px;
            box-sizing: border-box;
        }

        .wrap #form p:last-child input {
            width: 70px;
            background: #19c2ff;
            color: #fff;
            outline: none;
        
        }

        .wrap #form p select {
            width: 140px;
            height: 28px;
            border-radius: 12px;
            border: solid 1px #19c2ff;
            margin: 0 5px;
        }

        .wrap #table {
            width: 460px;
            border-radius: 12px;
            position: absolute;
            left: 50%;
            top: 275px;
            transform: translateX(-50%);
            box-sizing: border-box;
            overflow: hidden;
        }

        .wrap #table thead {
            width: 100%;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border-top-left-radius: 12px;
            border-top-right-radius: 12px;
            color: #fff;
            background: #4cbfe5;
        }

        .wrap #table thead a {
            color: #fff;
        }

        .wrap #table tbody {
            color: #19c2ff;
        }

        .wrap #table tbody a {
            color: #19c2ff;
        }

        .wrap #table tbody tr {
            background: #fff;
        }

        .wrap #table tbody tr th:nth-child(1) {
            text-align: left;
            padding-left: 20px;
        }


        /* input[type='checkbox'] {
            width: 12px;
            height: 12px;
            background-color: #fff;
            -webkit-appearance: none; 
            border: 1px solid #19c2ff;
            border-radius: 2px;
            outline: none;
        }

        input[type=checkbox]:checked {
            color: #19c2ff;
        } */
        .title{
            width: 100%;
            height: 200px;
            margin-top: 40px;
            text-align: center;
            font-size: 30px;
            color:white
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="title">学生系统</div>
        <div id="form">
            <p>姓名<input id="username" type="text" placeholder="例：张三123" /></p>
            <p>年龄<input id="age" type="text" placeholder="例：21" /></p>
            <p>性别
                <select id="gender">
                    <option value="1">男</option>
                    <option value="2">女</option>
                    <!-- <option value="秘密">你猜</option> -->
                </select>
            </p>
            <p>分数<input id="score" type="text" placeholder="例：90"></p>
            <p>
                <input type="button" value="添加" id="addBtn" />
                <input type="button" value="年龄排序" id="sortBtnAge"/>
                <input type="button" value="分数排序" id="sortBtnScore"/>
            </p>
        </div>
        <table id="table">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>分数</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
    <script>
        let bodyEle = document.querySelector("#table > tbody");
        let usernameEle = document.querySelector("#username");
        let ageEle = document.querySelector("#age");
        let genderEle = document.querySelector("#gender");
        let scoreEle = document.querySelector("#score");
        let addBtnEle = document.querySelector("#addBtn");
        
        let sortBtnScore = document.querySelector("#sortBtnScore");
        let sortBtnAge = document.querySelector("#sortBtnAge");


         // 创建ajax
        let xhr ; 
        if (window.XMLHttpRequest){
            xhr = new XMLHttpRequest();
        } else {
            xhr = new ActiveXObject();
        }
        
        xhr.open("get",`./operate.php`,true); //默认是false 同步的ajax  ；true是异步的ajax
        xhr.send();
        xhr.onload = function (){
            let dataBase = JSON.parse(xhr.responseText);
            // console.log(dataBase);
            // console.log(xhr.responseText);
            renderDom(dataBase,bodyEle);
        }
        

        addBtnEle.onclick = function (){
            let stuName = usernameEle.value;
            let age = ageEle.value;
            let gender = genderEle.value;
            let score = scoreEle.value;
           
            
            xhr.open("get",`./operate.php?op=add&stuName=${stuName}&age=${age}&gender=${gender}&score=${score}`,true); //默认是false 同步的ajax  ；true是异步的ajax
            xhr.send();
            xhr.onload = function (){
                let dataBase = JSON.parse(xhr.responseText);
                renderDom(dataBase,bodyEle);
            }
        }

        function delF(){
            let delEles = document.querySelectorAll(".del");
            delEles.forEach(function(delEle){
                delEle.onclick = function (){
                    let id = delEle.attributes.myid.value;
                    // console.log(id);
                    xhr.open("get",`./operate.php?op=del&id=${id}`,true); //默认是false 同步的ajax  ；true是异步的ajax
                    xhr.send();
                    xhr.onload = function (){
                        let dataBase = JSON.parse(xhr.responseText);
                        renderDom(dataBase,bodyEle);
                    }
                }
            });
        }
        
        sortBtnScore.onclick = function (){
            xhr.open("get",`./operate.php?op=sort&by=score`,true); //默认是false 同步的ajax  ；true是异步的ajax
            xhr.send();
            xhr.onload = function (){
                let dataBase = JSON.parse(xhr.responseText);
                renderDom(dataBase,bodyEle);
            }
        }
        sortBtnAge.onclick = function (){
            xhr.open("get",`./operate.php?op=sort&by=age`,true); //默认是false 同步的ajax  ；true是异步的ajax
            xhr.send();
            xhr.onload = function (){
                let dataBase = JSON.parse(xhr.responseText);
                renderDom(dataBase,bodyEle);
            }
        }

        function renderDom(Data,ele){
            // console.log(Data);
            // console.log(ele);
            ele.innerHTML = '';
            Data.forEach(function( item ){
                let trEle = document.createElement("tr");
                trEle.innerHTML = `<td>${item.stuName}</td><td>${item.age}</td><td>${item.gender==1?"男":"女"}</td><td>${item.score}</td><td myid=${item.id} class="del">删除</td>`;
                ele.appendChild(trEle);
                // console.log(trEle);
            });
            delF();
        }
    </script>
</body>
</html>